<!DOCTYPE html>
<html>

<head>

    {include file="Public/header"}
    <!-- jqgrid-->
     <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
        .w_H {
            width: 100%;
            height: 100%
        }

        .col-H {
            height: 600px
        }

        select {
            width: 150px;
            height: 22px;
        }

        input[type="text"] {
            height: 22px;
            width: 150px
        }

        /*#select2 option[checked="checked"]{background: #fff}*/

        select:-internal-list-box option:checked {
            background: #fff
        }

        p {
            color: red
        }
    </style>
</head>

<body class="white-bg" style="color:#333;padding:3px;">
 <div class="page-heade">
       <h2 class="title_color text-center">维护系统-系统分组管理</h2>
    </div>
<div action="" class="form-group">
    <table class="table table-bordered agencyM_table white-bg" style="margin-bottom:0">
        <tr>
            <td colspan="8">
                模糊查询：系统名称<input name="title" type="text" class="form-control" style="display: inline-block;">
                <button class="btn btn-primary">查询</button>
                <button class="btn btn-primary">清空查询条件</button>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <div class="col-md-12 border_S border_T"
                     style="background: #d0e0e0;line-height: 40px;text-align: center;font-size:18px"><label
                        for="select1">没分组的系统</label></div>
                <div class="col-md-12 border_L" style="height: 600px;padding: 0">
                    <select multiple id="select1" name="select1" style="height: 100%;width: 100% ">
                        {volist name="meifenzu" id="row"}
                        <option value="{$row.id}">{$row.title}</option>
                        {/volist}
                    </select>
                </div>
            </td>
            <td colspan="2">
                <div style="width: 80px;height: 30px;"><span
                        style="border-radius: 6px;padding:3px 5px;cursor: pointer; border:1px solid #ccc;margin-left: 90px;"
                        id="toRight">&gt;&gt;&gt;&gt;&gt;&gt;</span></div>
                <br>

                <div style="width: 80px;height: 30px;"><span
                        style="border-radius: 6px;padding:3px 5px;cursor: pointer; border:1px solid #ccc;margin-left: 90px;"
                        id="toLeft">&lt;&lt;&lt;&lt;&lt;&lt;</span></div>

            </td>
            <td colspan="3">
                <div class="col-md-12 border_S border_T"
                     style="background: #d0e0e0;line-height: 40px;text-align: center;font-size:18px">{$data.title}的系统
                </div>
                <div class="col-md-12 border_L" style="height: 600px;padding: 0">
                    <select multiple id="select2" name="select2" style="height: 100%;width: 100% ">
                        {volist name="yifenzu" id="row"}
                        <option value="{$row.id}">{$row.title}</option>
                        {/volist}
                    </select>
                </div>
            </td>
        </tr>
    </table>
    <div class="row white-bg text-center" style="padding:5px 0">
        <button class="btn btn-warning" onclick="back()">返回</button>
    </div>
</>

<!-- 全局js -->
{include file="Public/footer"}

<script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>
<script>
    $(document).ready(function () {
        $('#toRight').click(function () {
            var $options = $('#select1 option:selected'); //获取选中的元素
            var arr = [];
            $options.each(function (i, o) {
                arr.push($(o).val())
            })
            arr = arr.join(',')
            var $remove = $options.remove();

            $.ajax({
                type: 'post',
                url: '{:url("batchSet")}',
                data: {pid: '{$id}', id: arr},
                dataType: 'json',
                success: function (data) {
                    if (data.success == false) {
                        swal(data.msg, '', 'error')
                    } else {
                        $remove.appendTo('#select2');
                    }
                }
            })
        });
        $('#toLeft').click(function () {
            var $options = $('#select2 option:selected'); //获取选中的元素
            var arr = [];
            $options.each(function (i, o) {
                arr.push($(o).val())
            })
            arr = arr.join(',')
            var $remove = $options.remove();

            $.ajax({
                type: 'post',
                url: '{:url("batchSet2")}',
                data: {pid: '{$id}', id: arr},
                dataType: 'json',
                success: function (data) {
                    if (data.success == false) {
                        swal(data.msg, '', 'error')
                    } else {
                        $remove.appendTo('#select1');
                    }
                }
            })
        });

    })

    function back() {
        parent.layer.close(parent.layer.getFrameIndex(window.name))
    }
</script>

</body>

</html>